import axios from 'axios'
import React, { useState, useEffect } from 'react'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
import { useSearchParams, useNavigate } from 'react-router-dom'
import '../../static/Unsubscribe/Unsubscribe.css'
import { NavBar, Space, Toast, Stepper, Button } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
export default function Unsubscribe() {

    const [list, setList] = useState([])
    const navigate = useNavigate()
    let num = 0
    let [params] = useSearchParams()
    let id = params.get('id')
    const getList = () => {
        axios.get(`/OrderRouter/Unsubscribe?id=${id}&nums=${num}`).then(res => {
            setList(res.data.list)
        })
    }
    useEffect(() => {
        getList()
    }, [])
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    const handleClikc = () => {
        getList()
        navigate('/order')
    }
    return (
        <div className='Unsubscribe_box'>
            <div className='Unsubscribe_title'>
                <NavBar onBack={back}>申请退订</NavBar>
            </div>
            {
                list.map((item, index) => {
                    return (
                        <div className='Unsubscribe_content'>
                            <h3>{item.title}</h3>
                            <div className='Unsubscribe_style'>
                                <div>
                                    商品份数：
                                </div>
                                <div className='unsubscribe_num'>
                                    <span style={{ color: "orange" }}>最多可退{item.num}份</span>
                                    <span> <Stepper
                                        min={1}
                                        max={item.num}
                                        defaultValue={1}
                                        onChange={value => {
                                            num = value
                                        }}
                                    /></span>
                                </div>
                            </div>
                        </div>
                    )
                })
            }
            <div className='Unsubscribe_buttom'>
                <Button block color='primary' size='large' onClick={() => handleClikc()}>
                    申请退订
                </Button>
            </div>
        </div >
    )
}
